import { useState } from "react";
import Head from "next/head";
import Layout from "@/components/Layout";
import GetInput from "@/components/GetInput";
import ResultDisplay from "@/components/ResultDisplay/ResultDisplay";
import VisFragment from "@/types/VisFragment";

const IndexPage = () => {
  // states
  const [data, setData] = useState<{
    ifSuccessful: boolean;
    fragment: VisFragment;
  }>({
    ifSuccessful: false,
    fragment: {} as VisFragment,
  });

  return (
    <Layout>
      <Head>
        <title>ReVise</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/icons/png/256x256.png" />
      </Head>
      {/* main component */}
      {!data.ifSuccessful && <GetInput setData={setData} />}
      {data.ifSuccessful && (
        <ResultDisplay data={data.fragment} setData={setData} />
      )}
    </Layout>
  );
};

export default IndexPage;
